<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
  <p>{{str}}</p>
  <hr/>
  <p>{{num}}</p>
  <hr/>
  <p>{{obj}}</p>
  <hr/>
  <p>{{arr}}</p>
  <hr/>
  <button @click="fn">点我</button>
</div>
</body>
<script>
  new Vue({
    el : '#root',
    data:{
      str:"明年开春我就要找工作啦！我就要离开御码啦！",
      num:100,
      obj:{
        username:"sxx",
        age:200
      },
      arr:[1,2,3,4]
    },
    watch:{
      str(newValue,oldValue){
        console.log('str>>>>>>',newValue,oldValue);
      },
      num(newValue,oldValue){
        console.log('num>>>>>>',newValue,oldValue);
      },
      // obj(newValue,oldValue){
      //   console.log('obj>>>>>>',newValue,oldValue);
      // },    直接监听obj不可以
      obj : {
        handler(newValue,oldValue){
          console.log('obj>>>>>>',newValue===oldValue);//true
        },
        deep:true
      },
      //监听对象的指定属性
      "obj.username"(newValue,oldValue){
        console.log('obj.username>>>>>>',newValue,oldValue);//true
      },
      arr(newValue,oldValue){
        console.log('arr>>>>>>',newValue,oldValue);//true
      },
    },
    methods :{
      fn(){
        // this.str+='!';
        // this.num+=100;
        // this.obj.username = 'dcl';
        // this.arr.push(7);  这种修改可以被侦听
        // this.arr[1] = 999;  这种修改无法被侦听也无法使用响应式
      }
    }
  })
</script>
</html>